<template>
  <el-container v-loading="showContainer">
      <el-aside
        width="200px"
        style="box-shadow: rgba(0, 0, 0, 0.05) 0px 2px 20px 0.5px;border-radius:6px;padding:10px"
      >
          <el-menu :default-active="defaultActive" @select="handleSelect">
             <el-menu-item v-for="item in dynamicList" :index="item.name">{{item.name}}</el-menu-item>
          </el-menu>
      </el-aside>
     <div style="width:100%;margin-left:20px">
       <el-tabs type="border-card" v-model="activeName">
        <el-tab-pane label="表单属性列表" name="表单属性列表" v-loading="showTable">
          <el-table
            :data="tableData"
            border
            style="width: 100%"
            :header-cell-style="{ background: 'rgb(245,247,250)' }"
          >
            <el-table-column prop="name" label="属性名" width="180">
            </el-table-column>
<!--            <el-table-column prop="code" label="编码"> </el-table-column>-->
            <el-table-column prop="belongTo" label="所属表单">
            </el-table-column>
            <el-table-column label="是否可用">
              <template slot-scope="scope">
                {{scope.row.enable=='true'?'可用':'不可用'}}
              </template>
            </el-table-column>
            <el-table-column prop="update" label="更新时间"> </el-table-column>
            <el-table-column prop="operator" label="操作人"> </el-table-column>
            <el-table-column label="操作" width="200">
              <template slot-scope="scope">
                <el-button
                  size="mini"
                  @click="handleConfig(scope.$index, scope.row)"
                  >修改</el-button
                >
                <el-button
                  size="mini"
                  type="danger"
                  @click="handleDelete(scope.$index, scope.row)"
                  >删除</el-button
                >
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>
        <el-tab-pane label="表单属性添加" name="表单属性添加" @click.native="addAttribute">
          <el-form
            ref="form"
            :model="form"
            label-width="80px"
            size="medium"
            label-position="left"
          >
            <el-form-item label="所属表单">
             <el-select v-model="form.belongTo" placeholder="请选择所属表单">
                <el-option v-for="item in dynamicList" :label="item.name" :value="item.name"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="属性名">
              <el-input v-model="form.name"></el-input>
            </el-form-item>
            <el-form-item label="是否可用">
              <el-select v-model="form.enable" placeholder="请选择是否可用">
                <el-option label="可用" value="true"></el-option>
                <el-option label="不可用" value="false"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="备注">
              <el-input
                type="textarea"
                v-model="form.mes"
                style="width:600px"
              ></el-input>
            </el-form-item>
            <el-form-item style="margin-left:80px">
              <el-button type="primary" @click="onSubmit(1)">保存</el-button>
              <el-button>取消</el-button>
            </el-form-item>
          </el-form>
        </el-tab-pane>
        <el-tab-pane label="人事信息表单修改" name="人事信息表单修改" :disabled="true">
           <el-form
            ref="form"
            :model="form2"
            label-width="80px"
            size="medium"
            label-position="left"
          >
            <el-form-item label="所属表单">
             <el-select v-model="form2.belongTo" placeholder="请选择所属表单" disabled>
                <el-option v-for="item in dynamicList" :label="item.name" :value="item.name"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="属性名">
              <el-input v-model="form2.name"></el-input>
            </el-form-item>
            <el-form-item label="是否可用">
              <el-select v-model="form2.enable" placeholder="请选择是否可用">
                <el-option label="可用" value="true"></el-option>
                <el-option label="不可用" value="false"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="备注">
              <el-input
                type="textarea"
                v-model="form2.mes"
                style="width:600px"
              ></el-input>
            </el-form-item>
            <el-form-item style="margin-left:80px">
              <el-button type="primary" @click="onSubmit(2)">保存</el-button>
              <el-button>取消</el-button>
            </el-form-item>
          </el-form>
        </el-tab-pane>
      </el-tabs>
     </div>
  </el-container>
</template>

<script>
import TaskManager from "../service/TaskManager";
import dynamic from "../components/dynamic";

export default {
  name: "formList",
  data() {
    return {
      defaultActive:"",
      showTable:false,
      showContainer:false,
      activeName:"",
      row:"",
      form:{
        name:"",
        mes:"",
        belongTo:"",
        enable:true
      },
      form2:{
        name:"",
        mes:"",
        belongTo:"",
        enable:true
      },
      dynamicList:[],
      tableData: [],
      formList:[]
    };
  },
  methods:{
    handleConfig(index,row){
      console.log(index,row)
      this.form2=row;
      this.oldName=row.name
      this.activeName="人事信息表单修改"
    },
    getDay() {
      let day=new Date();
      return day.getFullYear()+"-"+(day.getMonth()+1)+"-"+(day.getDate());
    },
    handleSelect(index){
      // console.log(index)
      this.form.belongTo=index;
      this.getDynamicForm(index);
    },
    handleDelete(index,row){
      this.row=row;
      this.$confirm('是否确定删除?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(()=>{
        this.onSubmit(3);
      }).catch(() => {
      });
    },
    getDynamicForm(name){
      this.tableData=[];
      this.showTable=true;
      let params={
        status:1,
        name:name
      }
      console.log(params)
      TaskManager.getDynamicForm(params).then((res)=>{
        if(res.data!="ERROR!"){
          this.tableData=res.data;
          this.activeName='表单属性列表';
        }
        this.showTable=false;
      })
    },
    addAttribute(){

    },
    onSubmit(num){
      let params={};
      if(num==1){
        params={
          status:'2',
          update:this.getDay(),
          name:this.form.name,
          belongTo:this.form.belongTo,
          desc:this.form.mes,
          isNew:true,
          enable:this.form.enable,
          creater:window.localStorage.dept+"-"+window.localStorage.name
        }
      }else if(num==2){
        params = {
          status: '2',
          update: this.getDay(),
          oldName: this.oldName,
          name: this.form2.name,
          belongTo: this.form2.belongTo,
          enable: this.form2.enable,
          desc:this.form2.mes,
          creater:window.localStorage.dept+"-"+window.localStorage.name
        }
      }else if(num==3){
        params = {
          status: '2',
          isDelete:true,
          name: this.row.id,
          belongTo: this.row.belongTo,
          desc:this.row.desc
        }
      }
      TaskManager.saveDynamic(params).then((res)=>{
        // if(res.data=='success'){
          this.$message({
            type:"success",
            message:res.data
          })
          TaskManager.getDynamicForm({status:1,name:this.form.belongTo}).then((res)=>{
            this.tableData=res.data;
            this.showTable=false;
            this.activeName="人事信息表单列表"
          })
        // }else{
        //   this.$message({
        //     type:"error",
        //     message:res.data
        //   })
        // }
      })
    }
  },
  mounted() {
    this.row=this.$route.params.row
    this.showContainer=true;
    TaskManager.getDynamicForm({status:0.1}).then((res)=>{
      this.dynamicList=res.data;
      // this.showTable=false;
      if(this.row!=undefined){
        this.getDynamicForm(this.row.name)
        this.defaultActive=this.row.name
      }else{
        this.getDynamicForm(res.data[0].name)
        this.defaultActive=res.data[0].name
      }
      this.showContainer=false;
    })

  }
};
</script>

<style>
.el-tabs--border-card {
  box-shadow: rgba(0, 0, 0, 0.05) 0px 2px 20px 0.5px;
}
.el-input {
  width: 250px;
}
.el-form-item {
  display: flex;
  justify-content: flex-start;
}
</style>
